<template>
    <el-card class="box-card">
    <div slot="header" class="clearfix">
        <span>{{monthNum}}员工考勤记录表</span>
        <el-button style="float: right;margin-right:15px" type="primary" @click="dialogFormVisible=true">批量导出</el-button>
        <el-button style="float: right;margin-right:15px;margin-left:0" type="primary" @click="nextList">下一月</el-button>
        <el-button style="float: right;margin-right:15px" type="primary" @click="prevList">上一月</el-button>
    </div>
    <div class="app-container">
      <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
          prop="userId"
          label="用户ID"
          sortable
          width="130"
          :filters="[{text: '2018-05-01', value: '2018-05-01'}, {text: '2018-06-02', value: '2018-05-02'}]"
          :filter-method="filterHandler"
          >
          </el-table-column>
          
          <el-table-column
          prop="realName"
          label="姓名"
          width="130">
          </el-table-column>
          <el-table-column
          prop="date"
          label="考勤时段"
        
          
          filter-placement="bottom-end">
          <template slot-scope="scope">
              <el-tag
              :type="scope.row.date === '2' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.date}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
          prop="unusualTime"
          label="异常次数"
          sortable
          filter-placement="bottom-end">
          <template slot-scope="scope">
              <el-tag
              :type="scope.row.unusualTime === '2' ? 'primary' : 'success'"
              disable-transitions>{{scope.row.unusualTime}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
          prop="totalWorkTime"
          label="工作时长"
          sortable
          width="140"
          filter-placement="bottom-end">
          <template slot-scope="scope">
              <el-tag
              type="primary"
              disable-transitions>{{scope.row.totalWorkTime}}</el-tag>
          </template>
          </el-table-column>
          <el-table-column
          prop="totalExtraTime"
          label="加班时长"
          width="140"
          sortable
          filter-placement="bottom-end">
          <template slot-scope="scope">
              <el-tag
              type="danger"
              disable-transitions>{{scope.row.totalExtraTime}}</el-tag>
          </template>
          </el-table-column>
          
          <!-- <el-table-column class-name="status-col" label="操作" width="160" align="center">
              <template slot-scope="scope">
                  <el-dropdown @command="handleCommand">
                  <el-button type="primary">
                      修改角色<i class="el-icon-arrow-down el-icon--right"></i>
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item  :command="composeValue(item[0],scope.$index)" >领导</el-dropdown-item>
                      <el-dropdown-item :command="composeValue(item[1],scope.$index)">上级领导</el-dropdown-item>
                      <el-dropdown-item :command="composeValue(item[2],scope.$index)">员工</el-dropdown-item>
                      
                  </el-dropdown-menu>
                  </el-dropdown>
              </template>
              
          </el-table-column> -->
      </el-table>
  </div>
  <div class="app-container">
    <div class="block" style="margin-top:20px;height:20px;float:right">
      <el-pagination style="float:right" background page-size="5" layout="prev, pager, next" :current-page="page"  :total="pageNum" @current-change="changPage">
      </el-pagination>
    </div>
  </div>
  <!-- 添加用户popover -->
  <div class="popForm">
    <el-dialog title="选择导出区间" :visible.sync="dialogFormVisible" center>
      <div class="container">
        <!-- <div class="block">
          <span class="demonstration">选择年:</span>
          <el-date-picker
            v-model="year"
            type="year"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM-dd"
            placeholder="选择年">
          </el-date-picker>
        </div> -->
        <div class="block">
          <span class="demonstration">选择导出的年月:</span>
          <el-date-picker
            v-model="month"
            type="month"
            :picker-options="pickerOptions1"
            value-format="yyyy-MM"
            placeholder="选择月份">
          </el-date-picker>
        </div>
      </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" :disabled="!dialogFormVisible" @click="exportExcel">导 出</el-button>
    </div>
    </el-dialog>
    </div>
    </el-card>
    <!--添加用户弹出框 -->
    
    
</template>

<script>
import qs from "qs";
export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      list: [],
      listLoading: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      year: "",
      month: "",  //月份数 为字符串拼接 如 2018-05
      monthNum:'', //月份数 为number  如 7
      countNum:0,
      pageNum:0,
      page:1
    };
  },
  computed: {
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        正常: "success",
        draft: "gray",
        异常: "danger"
      };
      return statusMap[status];
    }
  },
  created() {
    console.log(this.prevDate);
    this.$axios
      .post(
        "http://localhost:8088/outRecord",
        qs.stringify({
          dateNum: this.countNum+""
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res.data.data);
        console.log(this.RecordDate)
        this.list = res.data.data[0]
        this.pageNum = res.data.data[1]*5
        console.log(this.pageNum)
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    addUser() {},
    filterTag (){},
    formatter (){},
    filterHandler (){},
    
    // 上一月考勤表
    prevList() {
      this.countNum -=1
      if(this.countNum>0){
        this.countNum = 0
      }
      this.list = []
      this.$axios
      .post(
        "http://localhost:8088/outRecord",
        qs.stringify({
          dateNum: this.countNum+""
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res);
        this.list = res.data.data[0]
        this.pageNum = res.data.data[1]*5
        console.log(res.data.data[1])
        console.log(this.pageNum)*1
      })
      .catch(err => {
        console.log(err);
      });
    },
    // 下一月考勤表
    nextList() {
      this.countNum += 1
      if(this.countNum>0){
        this.countNum = 0
        this.$notify({
          title: '提醒',
          message: '已经没有下一月的数据了！',
          type: 'warning'
        });
      }
      
      this.$axios
      .post(
        "http://localhost:8088/outRecord",
        qs.stringify({
          dateNum: this.countNum+""
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res);
        this.list = res.data.data[0]
        console.log(res.data.data[1])
        this.pageNum = res.data.data[1]*5
         console.log(this.pageNum)
        // this.
      })
      .catch(err => {
        console.log(err);
      });
    },
    exportExcel() {
      const form = this.month; // 要发送到后台的数据
      window.location.href =
        "http://localhost:8088/outExcel?date=" + this.month;
      this.dialogFormVisible = false
    },

    //分页点击切换
    changPage (val){
      this.page = val
      this.$axios
      .post(
        "http://localhost:8088/outRecord",
        qs.stringify({
          dateNum: this.countNum+"",
          currentPage:val
        }),
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        }
      )
      .then(res => {
        console.log(res);
        this.list = res.data.data[0]
        this.pageNum = res.data.data[1]*5
        // this.
      })
      .catch(err => {
        console.log(err);
      });
    }
  }
};
</script>


<style lang="scss" scoped>
.text {
  font-size: 20px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix {
  span {
    font-size: 20px;
    line-height: 40px;
  }
}
.box-card {
  margin: 10px;
  .block {
    margin-bottom: 22px;
    .demonstration {
      width: 120px;
      float: left;
      font-weight: bold;
      padding: 0 12px 0 0;
      color: #606266;
      line-height: 40px;
      text-align: right;
    }
  }
}

.app-container {
  padding: 0;
}
</style>
